<template>
  <div class="container container--zone container-welcome feature-watchlist" v-if="!token">
    <div class="region region--full">
      <div class="comp-wh">
        <div class="column column--half">
          <div class="element element--header">
            <h2 class="header header--primary">
              <div class="title">Create your Watchlist</div>
            </h2>
            <h3 class="header header--secondary">
              <div class="title tother">
                Create a free Sinopoly Watch account to build your Watchlist.
              </div>
            </h3>
          </div>
          <ul class="element element--list">
            <li class="list__item">
              <i class="icon icon--check"></i>Track your stocks and get real
              time market data
            </li>
            <li class="list__item">
              <i class="icon icon--check"></i>Get real time news and articles on
              the stocks you watch
            </li>
            <li class="list__item">
              <i class="icon icon--check"></i>Asset class performance and sector
              snapshots
            </li>
            <li class="list__item">
              <i class="icon icon--check"></i>Get weekly snapshots of your
              Watchlist&nbsp;
            </li>
          </ul>
          <div class="element element--btn">
            <a class="button button--inverse m100" href="/singin">Create a free account</a>
          </div>
          <div class="element element--text">
            <div class="text">
              Already have an account?
              <router-link class="sign" to="/login">Log in</router-link>
            </div>
          </div>
        </div>
        <div class="column column--half feature-img" role="img" aria-label="iPhone Graphic">
          <div class="element element--img">
            <img class="img" alt="MarketWatch Watchlist on iPad" src="../../assets/watchlist-hero.png" />
          </div>
        </div>
      </div>
      <ul class="element element--list">
        <li class="list__item">
          <i class="icon icon--check"></i>Track your stocks and get real time
          market data
        </li>
        <li class="list__item">
          <i class="icon icon--check"></i>Get real time news and articles on the
          stocks you watch
        </li>
        <li class="list__item">
          <i class="icon icon--check"></i>Asset class performance and sector
          snapshots
        </li>
        <li class="list__item">
          <i class="icon icon--check"></i>Get weekly snapshots of your
          Watchlist&nbsp;
        </li>
      </ul>
      <div class="element element--btn">
        <router-link to="/singin">
          <a class="button button--inverse m100" href="#">Create a free account</a>
        </router-link>
      </div>
      <div class="element element--text">
        <div class="text">
          Already have an account?
          <router-link to="/login">
            <a class="sign" data-track-payload='{"event_name":"signin_link","signin_location":"header"}'>Log in</a>
          </router-link>
        </div>
      </div>
    </div>
    <!-- <div class="column column--half feature-img" role="img" aria-label="iPhone Graphic">
      <div class="element element--img">
        <img class="img" alt="MarketWatch Watchlist on iPad"
          src="https://sts3.wsj.net/bucket-a/maggie/static/images/watchlist-hero.png" />
      </div>
    </div> -->
  </div>
  <div class="app-container-wsj" v-else>
    <loginIndex></loginIndex>
  </div>
</template>
<script setup>
const islogin = ref(false);
import loginIndex from "./loginIndex.vue";
import { getStorage } from "@/utils";
const token = ref("");
token.value = getStorage("spToken");
</script>
<style lang="scss" scoped>
.container-welcome {
  max-width: 100%;
  background-image: url(../../assets/welcome-feature.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: -30px;
  margin-bottom: -20px;
  background-image: none;
  background-color: #3677a8;

  .region {
    padding: 100px 0;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    color: #fff;
  }

  .comp-wh {
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: justify;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;

    .element--img {
      margin-bottom: 0;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 500px;

      .img {
        height: 100%;
        max-height: 500px;
        width: auto;
        margin: 0 auto;
      }
    }

    .column--half {
      max-width: 640px;

      .element {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
      }

      .header {
        font: 400 1.5rem / 1.375 Mulish, sans-serif;
        margin: 0;
        padding-left: 0;
        padding-right: 0;

        .title {
          font-size: 2.8rem;
          line-height: 1.375;
          color: #fff;
          white-space: nowrap;
        }

        .tother {
          font: 400 1.5rem / 1.375 Lato, sans-serif;
          white-space: normal;
        }

        .title::before {
          background: none;
        }
      }
    }
  }
}

.header--secondary .title {
  font: 400 1.5rem / 1.375 Lato, sans-serif;
  margin-bottom: 0;
}

.icon:before {
  text-align: center;
}

.icon--check::before {
  content: "\e924";
}

.sign {
  font-weight: 700;
  text-decoration: underline;
}
</style>
